<template>
  <div class='interfaceAllWrapper' v-loading='loading'>
    <div class="lifeInterfaceWrapper">
        <div class="interfaceMiddle">
            <!-- 生活信息 -->
            <div class="lifeAll" v-for="item in lifeList" :key="item.index">
                <div class="lifeWrapper">
                    <div class="lifeIcon">
                        <img :src="item.iconUrl" alt=""><span>{{item.type}}</span>
                    </div>
                </div>
                <div class="lifeItemWrapper">
                    <div class="lifeItem" v-for="element in item.apiListData" :key="element.index">
                        <div :style="{backgroundImage:`url(${element.icon})`}" class="lifeImage"></div>
                        <div class="lifeTitle">{{element.name}}</div>
                    </div>
                    <!-- 清除浮动 -->
                    <div class="clearFloat" style="clear: both">
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import star01Image from '@/assets/img/home/star01.png'
import star02Image from '@/assets/img/home/star02.png'
import star03Image from '@/assets/img/home/star03.png'
import star04Image from '@/assets/img/home/star04.png'
import star05Image from '@/assets/img/home/star05.png'
import Top from '@/components/top/top.vue'
import Footer from '@/components/footer/footer.vue'
export default {
  name: 'InterfaceAll',
  data () {
    return {
      loading: false,
      star01Image,
      star02Image,
      star03Image,
      star04Image,
      star05Image,
      lifeList: []
    }
  },
  mounted () {
  },
  components: {
    Top,
    Footer
  },
  created () {
    this.getAllInterfaceList()
  },
  methods: {
    // 获取所有的接口分类和接口
    getAllInterfaceList () {
      this.loading = true
      this.$http.get('/v1/apiList/getFullApiListWithNode').then(result => {
        if (result.data.code === 200) {
          this.lifeList = result.data.data
        }
        this.loading = false
      }).catch(errMsg => {
        this.loading = false
        this.$message({
          message: '接口大全错误',
          type: 'error'
        })
      })
    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/css/variable.styl';
.interfaceAllWrapper {
    min-height 500px
    background-color white
    .lifeInterfaceWrapper {
        .interfaceMiddle {
            width 1200px
            margin 0 auto
            .lifeWrapper {
                border-bottom-style solid
                border-width: 1px
                border-color: $color-theme
                padding 20px 0px
                .lifeIcon {
                    margin-left 5px
                    img {
                        width 25px
                        height 25px
                    }
                    span {
                        font-size 24px
                        color $color-theme
                        margin-left 10px
                    }
                }
            }
            .lifeItemWrapper {
                padding 20px 5px
                display flex
                flex-wrap wrap
                .lifeItem {
                    width 200px
                    border-bottom-style solid
                    border-width:1px
                    border-color: #E4E4E4
                    padding-bottom 5px
                    margin-bottom 20px
                    display flex
                    margin-right 97px
                    .lifeImage {
                        width 35px
                        height 35px
                        background-repeat: no-repeat;
                        background-size: cover;
                    }
                    .lifeTitle {
                        color #666
                        line-height 35px
                        margin-left 3px
                    }
                }
            }
        }
    }
}
</style>
